import { delectAuditDeleteApi, getMerchantListApi } from '@/services/api';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { useAccess } from '@umijs/max';
import { Button, Image, Popconfirm, Space, Typography, message } from 'antd';
import { isEqual } from 'lodash';
import React, { useRef, useState } from 'react';
import CreateMerchantConfig from '../Drawer/CreateMerchantConfig';

const Inventory: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const {
    merchan_manage_permissions_inventory_edit,
    merchan_manage_permissions_inventory_delete,
  } = useAccess() as any;

  const [clientDrawerParams, setclientDrawerParams] = useState({
    open: false,
    info: {},
  });

  const columns: any = [
    {
      title: '姓名',
      dataIndex: 'name',
      hideInTable: true,
    },
    {
      title: '商户ID',
      dataIndex: 'id',
      hideInSearch: true,
      width: 60,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '电话',
      dataIndex: 'mobile',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '密码',
      dataIndex: 'password',
      hideInSearch: true,
      width: 120,
      copyable: true,
      render: (text, record) => {
        return (
          <Typography.Paragraph
            style={{
              marginBottom: 0,
            }}
            copyable={{ text: record?.password }}
          >
            ********
          </Typography.Paragraph>
        );
      },
    },
    {
      title: '显示时间',
      dataIndex: 'created',
      hideInSearch: true,
      width: 120,
    },
    {
      title: '显示材料',
      dataIndex: 'online',
      hideInSearch: true,
      width: 120,
      render: (_, _record) => {
        const { front, license, opposite } = _record || {};
        return (
          <Space>
            {front && <Image src={front} width={50} height={50}></Image>}
            {license && <Image src={license} width={50} height={50}></Image>}
            {opposite && <Image src={opposite} width={50} height={50}></Image>}
          </Space>
        );
      },
    },
    // {
    //   title: '状态',
    //   dataIndex: 'status',
    //   hideInSearch: true,
    //   width: 120,
    //   render: (_, _record) => {
    //     return (
    //       <Tag color={STATUS_TAG.COLOR[_record?.status]}>
    //         {STATUS_TAG.LABEL[_record?.status]}
    //       </Tag>
    //     );
    //   },
    // },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 80,
      render: (text: any, record: any) => [
        merchan_manage_permissions_inventory_edit && (
          <a
            key="edit"
            onClick={() => {
              setclientDrawerParams({
                open: true,
                info: record,
              });
            }}
          >
            编辑
          </a>
        ),
        merchan_manage_permissions_inventory_delete && (
          <Popconfirm
            key="bofan"
            title={`确定删除该商户- ${record?.name}`}
            onConfirm={async () => {
              try {
                await delectAuditDeleteApi({
                  id: record?.id,
                });
                message.success('删除成功');
                actionRef.current?.reload();
              } catch (error) {}
            }}
            okText="Yes"
            cancelText="No"
          >
            <Button className="_common_card_left_item_btn" type="link" danger>
              删除
            </Button>
          </Popconfirm>
        ),
      ],
    },
  ];

  return (
    <>
      <ProTable
        bordered
        columns={columns}
        actionRef={actionRef}
        cardBordered
        scroll={{ x: 1200 }}
        request={async (_parame) => {
          const { pageSize, current, ...ret } = _parame;
          const { data } = await getMerchantListApi({
            page: current,
            size: pageSize,
            ...ret,
          });
          return {
            data: data?.list ?? [],
            success: true,
            total: data?.count,
          };
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          defaultPageSize: 10,
        }}
        dateFormatter="string"
      />

      {clientDrawerParams.open && (
        <CreateMerchantConfig
          open={clientDrawerParams.open}
          info={clientDrawerParams.info}
          close={() => {
            setclientDrawerParams({
              open: false,
              info: '',
            });
          }}
          onFinsh={() => {
            setclientDrawerParams({
              open: false,
              info: '',
            });

            actionRef.current?.reload();
          }}
        ></CreateMerchantConfig>
      )}
    </>
  );
};

export default React.memo(Inventory, (prev, next) => isEqual(prev, next));
